<template>
    <div style="width: 100%;height: 100vh">
        <img style="width: 100%;height:100vh;position: fixed;z-index: -9999"
             src="@/assets/images/i_bg2.png">
        <mu-paper align="center"
                  class="bg-color">
            <mu-avatar size="99">
                <img src="@/assets/images/logo.jpg" style="width: 100%;z-index:0">
                <div style="position:absolute;z-index: 99;width: 100%;height: 50%"></div>
            </mu-avatar>
            <span class="invite-title">2019届毕业生毕业典礼邀请函</span>
            <mu-text-field style="color: black;"
                           v-model="form.stu_name"
                           label="学生姓名"
                           placeholder="请输入学生姓名"
                           @focusout="getMyAcademic"></mu-text-field>
            <br>
            <mu-select label="所在学院"
                       style="color: black;"
                       v-model="form.ac_name">
                <mu-option v-for="academic,index in academics"
                           avatar
                           :key="academic.ac_name"
                           :label="academic.ac_name"
                           :value="academic.ac_name">
                    <mu-list-item-content>
                        <mu-list-item-title>{{academic.ac_name}}</mu-list-item-title>
                    </mu-list-item-content>
                </mu-option>
            </mu-select>
            <br>
            <!--            <mu-text-field style="font-size: 17px" v-model="form.ac_name" label="所在学院"></mu-text-field>-->
            <mu-button style="background-color: rgb(181, 69, 49);color: white" @click="onLogin">接收邀请函</mu-button>
        </mu-paper>

        <div class="footer">
            &copy;最终解释权归学生处所有
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "Login",
        data() {
            return {
                academics: [],
                form: {
                    stu_name: '',
                    ac_name: ''
                }

            }
        },
        methods: {
            ...mapActions(
                [
                    "getAcademics",
                    "getCeremony"
                ]
            ),
            getMyAcademic() {
                if (this.form.stu_name) {
                    this.getAcademics({stu_name: this.form.stu_name}).then((res) => {
                        if(res.data.data.academics.length<=0){
                            alert("未查到学生[ "+this.form.stu_name+" ]的信息!")
                        }
                        this.academics = res.data.data.academics
                    });
                }
            },
            onLogin() {
                let ceremony = localStorage.getItem("jluzh_ceremony_v1")
                if (ceremony) {
                    let ceremony_obj = JSON.parse(ceremony)
                    if (ceremony_obj.ac_name === this.form.ac_name && this.form.stu_name === ceremony_obj.stu_name) {
                        this.$router.push('/jluzh_ceremony/foryou')
                        return
                    }
                }
                this.getCeremony(this.form).then(
                    (res) => {
                        let data = res.data
                        if (data.code === 0 && data.data.ceremony) {

                            let ceremony = data.data.ceremony
                            if(localStorage.getItem('jluzh_ceremony')){
                                localStorage.removeItem('jluzh_ceremony')
                            }
                            localStorage.setItem('jluzh_ceremony_v1', JSON.stringify(ceremony))
                            this.$router.push('/jluzh_ceremony/foryou')
                            //alert(ceremony.ac_name)
                        } else if (!data.data.ceremony) {
                            alert("未查到数据!")
                        }
                    }
                )
            }
        },
        created() {
            if (this.$route.query.hasOwnProperty('clearLocalHistory')) {
                localStorage.clear()
            }
            let academics = localStorage.getItem('jluzh_academics_list')
            let stu = localStorage.getItem('jluzh_ceremony_v1')
            if (stu) {
                let form = JSON.parse(stu)
                this.form.stu_name = form.stu_name
                this.form.ac_name = form.ac_name
            }
            if (academics) {
                this.academics = JSON.parse(academics).academics
            } else {
                this.getAcademics({}).then((res) => {
                    let data = {
                        academics: res.data.data.academics.filter(item => {
                            return item.ac_name !== "优秀毕业生"
                        })
                    }
                    localStorage.setItem("jluzh_academics_list", JSON.stringify(data))
                    this.academics = data.academics
                });
            }
        }
    }
</script>

<style scoped>
    .footer {
        bottom: 0;
        position: fixed;
        width: 100%;
        background-color: rgba(235, 167, 180, 0.32);
        text-align: center;
        color: rgba(255, 255, 255, 0.75);
        font-size: xx-small;
        padding-top: 5px;
        padding-bottom: 2px;
    }

    .bg-color {
        position: absolute;
        background-color: rgba(227, 146, 132, 0.47);
        top: 10vh;
        left: 50%;
        transform: translate(-50%, 0%);
        padding: 18px;
        border-radius: 8px;
    }

    .invite-title {
        padding-top: 8px;
        display: block;
        font-size: 4.7vw;
        font-weight: bold;
    }

</style>